<template>
  <div id="container">
    <div class="searchBox">
      <input v-model="lineName" class="search" type="text" placeholder="请输入线路、站点名称">
      <input type="button" value="搜索" class="search-but" @click="searchLine">
    </div>
    <div class="inquire">
      <div class="inquire-input">
        <div class="inquire-input-start">
          <span>起点</span>
          <input v-model="startKeyword" type="text" placeholder="请输入起点">
        </div>
        <div class="inquire-input-end">
          <span>终点</span>
          <input v-model="endKeyword" type="text" placeholder="请输入终点">
        </div>
        <div class="inquire-img-wapper">
          <img src="../assets/images/jiantou_shangxiaqiehuan.png" alt="">
        </div>
        <div class="search-buttom">
          <input type="button" value="查询" @click="searchTransfer">
        </div>
      </div>
    </div>
    <div class="show-result">
      <ul v-if="resultList.length">
        <li @click="pitchOn(item.name,index)" v-for="(item, index) of resultList" :key="index">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Transfer",
  data () {
    return {
      resultList: [],
      startKeyword: '',
      endKeyword: '',
      isStart: true,
      isLine: true,
      isLineSearch: null,
      lineName: ''
    }
  },
  watch: {
    startKeyword (newValue) {
      this.isLine = false
      this.isStart = true
      this.initAutocomplete(newValue,'poi')
    },
    endKeyword (newValue) {
      this.isLine = false
      this.isStart = false
      this.initAutocomplete(newValue,'poi')
    },
    lineName (newValue) {
      this.isLine = true
      this.isStart = false
      this.initAutocomplete(newValue, 'all')
    }
  },
  methods: {
    initAutocomplete (keyword, datatype) {
      const that = this
      AMap.plugin('AMap.Autocomplete', () => {
        const autocomplete = new AMap.Autocomplete({
          city: '桂林',
          datatype,
          citylimit: true
        })
        autocomplete.search(keyword, (status, result) => {
          if ( status === 'complete' && result.info==='OK') {
            if ( result.tips[0].name === that.startKeyword || result.tips[0].name === that.endKeyword || result.tips[0].name === that.lineName) {
              that.resultList = []
            } else {
              that.resultList = result.tips
            }
          } else {
            that.resultList = []
          }
        })
      })
    },
    searchTransfer () {
      if (this.startKeyword && this.endKeyword) {
        this.$router.push({
          path: '/Transfer',
          query: {
            startKeyword: this.startKeyword,
            endKeyword: this.endKeyword
          }
        })
      }
    },
    searchLine () {
      if (this.lineName) {
        if (this.isLineSearch) {
          this.$router.push({
            path: '/LineSearch',
            query: { lineName: this.lineName }
          })
        } else {
          this.$router.push({
            path: '/StationSearch',
            query: { lineName: this.lineName }
          })
        }
      }
    },
    pitchOn (name, index) {
      if (this.isStart) {
        this.startKeyword = name
      } else if (this.isLine) {
        if (Array.isArray(this.resultList[index].address)){
          this.isLineSearch = true
        } else {
          this.isLineSearch = false
        }
        this.lineName = name
      } else {
        this.endKeyword = name
      }
    }
  }
}

</script>

<style scoped lang="stylus">
  #container 
    width: 100%
    .searchBox
      overflow: hidden
      position: relative
      width: 100%
      height: 50px
      background-color: #0075ff
      .search
        position: absolute
        width: 200px
        height: 30px
        border-radius: 5px
        top: 10px
        left: 10%
        padding-left: 10px
      .search-but
        position: absolute
        width: 70px
        height: 30px
        top: 50%
        margin-top: -15px
        right: 30px
        border-radius: 5px
    .inquire
      padding: 20px
      font-size 18px
      .inquire-input
        position: relative
        padding-right: 35px
        .inquire-img-wapper
          position: absolute
          right: 0
          top 39px
        .inquire-input-start,.inquire-input-end
          padding: 18px 0 12px
          border-bottom: 1px solid #eae3e3;/*no*/
          input 
            font-size: 18px
            padding-left: 20px
            outline: none
      .search-buttom 
        padding-top: 20px
        input 
          display: block
          width: 70%
          height: 35px
          margin: 0 auto
          border-radius 5px
    .show-result 
      padding: 0 20px
      li
        font-size: 12px
        padding: 7px 0
        border-bottom: 1px solid #eae3e3;/*no*/
</style>

